<template>
    <div class="product">
        <div class="banner">
        </div>

        <div class="buttonList" v-for="(item,index) in items">
            <div class="flex">
                <div class="button" @click="onGeneralClick(item.link||'/',item.queryParams|| null)">{{item.name}}</div>
            </div>
        </div>
        <div class="buttonList">
            <div class="flex">
                <div class="button" @click="onShareDoor()">分享门锁</div>
            </div>
            <div class="flex">
                <div class="button" @click="onDeleteDevice()">删除设备</div>
            </div>
            <div class="flex">
                <div class="button" @click="onDeleteGateway()">删除网关</div>
            </div>
        </div>
        <van-popup v-model="show" ><van-loading color="#1989fa" /></van-popup>
    </div>
</template>

<script>
    import { Dialog,Toast,Loading,Popup } from 'vant';
    import { post } from "../../js/utils";
    import { TenonWebsocket } from "../../js/websocket";

    export default {
        name: 'Product',
        components: {
            Dialog,
            vanLoading: Loading,
            vanPopup: Popup
        },
        data () {
            return {
                show:false,
                devId : this.$route.query.Id,
                gatewayId: this.$route.query.GatewayId,
                items: [{
                    name: "远程分享密码",
                    link: '/remoteSharePassword',
                    queryParams: {
                        "devId":this.$route.query.Id,
                        "gatewayId": this.$route.query.GatewayId
                    }
                }, {
                    name: "用户列表",
                    link: '/userList',
                    queryParams: {
                        "devId":this.$route.query.Id,
                        "gatewayId": this.$route.query.GatewayId
                    }
                },  {
                    name: "分享列表",
                    link: '/shareList',
                    queryParams: {"devId":this.$route.query.Id}
                },{
                    name: "日志信息",
                    link: '/logData',
                    queryParams: {"devId":this.$route.query.Id}
                }, {
                    name: "保修卡",
                    link: '/guaranteeCard',
                    queryParams: {"devId":this.$route.query.Id}
                }],
            }
        },
        created () {

        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            onShareDoor: function () {
                post("/user/GetWxShareIdForDeviceBind", {
                    devId: this.devId,
                }).then(
                    res=>{
                        //to do 如果成功返回则跳转
                        this.$router.push({
                            path: '/share',
                            query: {devId:this.$route.query.Id,shareId:res.uid,enter:'product'}
                        });//其中login是你定义的一个路由模块
                    }
                ).catch((err) => {
                })
                /*this.$router.push({
                    path: '/share',
                    query: {devId:this.$route.query.Id,shareId:'aaa',enter:'product'}
                });//其中login是你定义的一个路由模块*/

            },
            onDeleteDevice: function () {
                 Dialog.confirm({
                    title: '删除本设备',
                    message: '删除后将重置该设备的相关信息'
                }).then(() => {
                    let _this = this;
                    post("/user/deleteDevice", {
                        devId: _this.devId,
                    }).then(
                        res => {
                            Toast.success('删除设备成功');
                            this.onGeneralClick('/home',null)
                        }
                    ).catch((err) => {
                        Toast.fail(err);
                    })

                })
            },
            onDeleteGateway: function(){
                let devId = this.devId;
                Dialog.confirm({
                    title: '删除网关',
                    message: '删除后将取消网关和设备的关系'
                }).then(() => {
                    /****/
                    post("/user/DeleteGatewayForDevice", {
                        devId: devId,
                    }).then(
                        res=>{
                            Toast.success('删除网关成功');
                            this.onGeneralClick('/home',null)
                        }
                    ).catch((err) => {
                        Toast.fail(err);
                    })
                    //1、显示删除中
                    this.show = true;
                    let _this = this;

                    //2、定义发送指定命令的回调函数
                    TenonWebsocket.msgHandlerCallbackMap.set('CmdFromGateway'+'delDevSuccess',function(data){
                        //toast1.clear()
                        _this.show = false;
                        Toast.success("网关解绑成功");

                    })

                    //3、解绑门锁
                    TenonWebsocket.sendData(JSON.stringify({
                        "Cmd":"CmdToGateway",
                        "SubCmd":"delDev",
                        "GatewayId": this.gatewayId,
                        "DevId": this.devId
                    }))

                }).catch(() => {
                    // on cancel
                });
            }
        }
    }
</script>

<style scoped>
    .product > .banner {
        width: 100vw;
        min-height: 30vh;
        background: url(../../assets/product_A3.png) no-repeat center top;
        background-size: 100% 100%;
    }

    .product > .buttonList > .flex {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        line-height: 8vh;
    }

    .product > .buttonList > .flex > .button {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }

    .product > .buttonList > .flex > .button:active {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_grep.png) no-repeat;
        color: orange;
        background-size: 100% 100%;
        align-self: center;
    }


</style>
